<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		ul {
			/* background-color: green; */
			width: 300px; height: 500px;
			clear: both;
			border-width: 1px;   /* 边框的宽度 */
			border-style: solid;  /* 显示边框 */
			border-color: black;   /*容器内文字的颜色 */
		}
		
		.l {
			float: left;
		}
		.r {
			float: right;
		}
		.l,.r{			
			width: 30%;
			line-height: 40px;
			height: 40px;
			text-align: center;
			clear: both;
			background-color: #696969;}
	</style>
	<body>
			<div>
				<ul> 
				<li class="l">左浮动 </li>
				<li class="l">左浮动</li>
				<li class="r">右浮动</li>
				<li class="l">左浮动</li>
				<li class="l">左浮动</li>
				<li class="r">右浮动</li>
				<li class="r">右浮动</li>
				</ul>
			</div> 
	</body>
</html>
